<template>
  <div>
    <h2>物流相关信息</h2>
    <div class="logistics-info-header">
      <div class="logistics-info-header-left">
        <div
          class="logistics-status hotpink"
          v-if="orderInfo.logisticsStatus === 0"
        >
          未发货
        </div>
        <div
          class="logistics-status lightgreen"
          v-else-if="orderInfo.logisticsStatus === 1"
        >
          已发货
        </div>
        <div
          class="logistics-status blue"
          v-else-if="orderInfo.logisticsStatus === 2"
        >
          已签收
        </div>
        <div
          class="logistics-status greenyellow"
          v-else-if="orderInfo.logisticsStatus === 3"
        >
          未签收
        </div>
        <div class="logistics-company">{{ orderInfo.logisticsCompany }}</div>
        <div class="logistics-no">{{ orderInfo.logisticsNo }}</div>
      </div>
    </div>
    <ul
      class="logistics-info-list"
      v-for="item in logisticsInfo"
      :key="item.time"
    >
      <li>
        <div class="logistics-info-list-time">{{ item.time }}</div>
        <div class="logistics-info-list-content">{{ item.content }}</div>
      </li>
    </ul>
    <button :disabled="false" v-click="orderInfo.role">查看物流详情</button>
  </div>
</template>

<script>
export default {
  name: 'LogisticsList',
  props: {
    orderInfo: {
      type: Object,
      required: true,
    },
    logisticsInfo: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {}
  },
  methods: {
    textlogisticsStatus() {
      switch (this.orderInfo.logisticsStatus) {
        case 0:
          this.orderInfo.logisticsStatus = '未发货'
          break
        case 1:
          this.orderInfo.logisticsStatus = '已发货'
          break
        case 2:
          this.orderInfo.logisticsStatus = '已签收'
          break
        case 3:
          this.orderInfo.logisticsStatus = '未签收'
          break
        default:
          break
      }
    },
  },
  directives: {
    click: {
      inserted(element, { value }) {
        /*   if (value === 'admin' || value === 'zhangsan' || value === 'lisi') {
          element.disabled = false
        } else {
          element.disabled = true
        } */
        // console.dir(element)
        const res = ['admin', 'zhangsan', 'lisi'].includes(value)
        element.disabled = !res
      },
    },
  },
}
</script>

<style scoped></style>
